<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height: 200px;
				/*边框和背景颜色：检测页面元素是否选中*/
				background-color: #362d1c;
				border: 1px solid red;
				/*id选择器和class选择器区别？
				 id用于页面
				*/
			}
			 #body {
			     width: 100%;
			     min-height: 400px; 
			     background-color: #ff0022;
			    border: 1px solid red;
			 }
			 #footer {
			     width: 100%;
			     height: 100px;
			     background-color: #eeff55;
			     color: #362d1c;
			    border: 1px solid red;
			 }
			
		</style>
	</head>
	<body>
		<!--选择器：抓取页面元素
		   ①元素选择器：以元素名称作为选择器，抓取页面元素
		   ②伪类选择器：在其他选择器上附加效果  :hover  鼠标悬停时
		                                     :before  在元素前生成文本，结合content属性
											 :after   在元素后生成文本，结合content属性
		   ③类选择器：以1个别名或者多个别名抓取页面元素
		   ④通用选择器：抓取页面上所有的元素，规范页面效果 【盒模型：内外边、字体】
		   ⑤id选择器；以别名形式抓取页面元素【唯一性：用于页面结构搭建、切片】
		   语法：  html 前标记 id="别名"
		          css   #别名
		-->
		<div id="header">页头</div>
		<!--设置页主体body，页尾footer，宽度100%，高度、颜色自定-->
		 <div id="body">页主体</div>
		    <div id="footer">页尾</div>
	</body>
</html>